<template>
  <div class="app-container">
    <div class="health-report-header">
      <div class="header-content">
        <el-avatar :src="avatar?avatar:'https://via.placeholder.com/150x100.png?text=Avatar'" :size="60" class="customer-avatar"></el-avatar>
        <div class="customer-info">
          <h1 class="customer-name">{{ detailInfo.customerName || '客户姓名' }}</h1>
          <p class="report-date">报告日期：{{ detailInfo.createTime || '----年--月--日' }}</p>
        </div>
      </div>
    </div>

    <div class="grid-container">
      <!-- 舌象脉诊结果分析区 -->
      <div class="grid-item tongue-analysis" v-if="type==1">
        <div class="card-header">
          <i class="el-icon-view analysis-icon"></i>
          <h2>舌象脉诊结果分析</h2>
        </div>
        <div class="card-content">
          <div class="analysis-details">
            <div class="detail-item">
              <span class="detail-label">舌诊类型：</span>
              <span class="detail-value">舌象</span>
            </div>
            <div class="detail-item">
              <span class="detail-label">中医虚实辩证结果：</span>
              <span class="detail-value">偏{{ detailInfo.sz.conclusion }}</span>
            </div>
            <ul class="analysis-list">
<!--              <li><span class="list-label">偏{{ detailInfo.sz.conclusion }}</span></li>-->
              <li><span class="list-label">面色：</span>{{ detailInfo.sz.face_color }}</li>
              <li><span class="list-label">唇色：</span>{{ detailInfo.sz.lip_color }}</li>
              <li><span class="list-label">舌苔颜色：</span>{{ detailInfo.sz.st_color_label }}</li>
              <li><span class="list-label">舌质颜色：</span>{{ detailInfo.sz.sz_color_label }}</li>
            </ul>
          </div>
          <div class="image-container">
            <image-preview
              :src="picture?picture:'https://via.placeholder.com/150x100.png?text=Tongue1'"
              style="width: 120px; height: 120px"
              fit="contain"
              :preview-src-list="picture?[picture]:[]"
              class="analysis-image"
            >
              <div slot="placeholder" class="image-slot">
                <i class="el-icon-loading"></i>
                <span>加载中...</span>
              </div>
            </image-preview>
            <p class="image-caption">舌象图片</p>
          </div>
        </div>
      </div>

      <!-- 脉象诊断区 -->
      <div class="grid-item pulse-diagnosis" v-if="type==2">
        <div class="card-header">
          <i class="el-icon-pulse pulse-icon"></i>
          <h2>脉象诊断</h2>
        </div>
        <div class="card-content">
          <div class="detail-item">
            <span class="detail-label">脉诊类型：</span>
            <span class="detail-value">脉象</span>
          </div>
          <div class="detail-item">
            <span class="detail-label">脉象介绍：</span>
          </div>
          <div class="pulse-images">
            <el-image
              src="https://via.placeholder.com/100x70.png?text=Pulse1"
              style="width: 80px; height: 80px"
              fit="contain"
              class="pulse-image"
            ></el-image>
            <el-image
              src="https://via.placeholder.com/100x70.png?text=Pulse2"
              style="width: 80px; height: 80px"
              fit="contain"
              class="pulse-image"
            ></el-image>
            <el-image
              src="https://via.placeholder.com/100x70.png?text=Pulse3"
              style="width: 80px; height: 80px"
              fit="contain"
              class="pulse-image"
            ></el-image>
          </div>
        </div>
      </div>

      <!-- 健康建议 -->
      <div class="grid-item health-advice">
        <div class="card-header">
          <i class="el-icon-lightning advice-icon"></i>
          <h2>健康建议</h2>
        </div>
        <div class="card-content compact">
          <div class="advice-content">
            <p class="advice-title">专家建议：</p>
            <div class="advice-text" v-html="detailInfo.expert_advice || '暂无专家建议'"></div>
          </div>
        </div>
      </div>

      <!-- 存在风险 -->
      <div class="grid-item risk">
        <div class="card-header">
          <i class="el-icon-warning risk-icon"></i>
          <h2>存在风险</h2>
        </div>
        <div class="card-content compact">
          <ul class="risk-list">
            <li v-for="(risk, index) in detailInfo.risks || ['药膳方案：当归*2g', '生活作息：1.', '生活作息：2.']"
                :key="index"
                class="risk-item">
              <i class="el-icon-circle-check risk-item-icon"></i>
              <span>{{ risk }}</span>
            </li>
          </ul>
        </div>
      </div>

      <!-- 推荐产品 -->
      <div class="grid-item recommended-products">
        <div class="card-header">
          <i class="el-icon-shopping-cart-2 recommend-icon"></i>
          <h2>推荐产品</h2>
        </div>
        <div class="card-content compact">
          <div class="products-content">
            <p class="section-title">商品推荐</p>
            <div class="product-list">
              <div v-for="item in detailInfo.productList" :key="item.id" class="product-item">
                <image-preview
                  :src="item.mainImage"
                  class="product-image"
                  :preview-src-list="[item.mainImage]"
                  fit="cover"
                ></image-preview>
                <div class="product-info">
                  <p class="product-name">{{item.name}}</p>
                  <p class="product-price">{{item.price}}</p>
                  <p class="product-therapeuticEffect">{{item.therapeuticEffect}}</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 健康生活方案 -->
      <div class="grid-item healthy-lifestyle">
        <div class="card-header">
          <i class="el-icon-apple lifestyle-icon"></i>
          <h2>健康生活方案</h2>
        </div>
        <div class="card-content compact">
          <ul class="lifestyle-list">
            <li v-for="(scheme, index) in detailInfo.schemes || ['药膳方案：当归*2g', '生活作息：1.', '生活作息：2.']"
                :key="index"
                class="lifestyle-item">
              <i class="el-icon-circle-check lifestyle-item-icon"></i>
              <span>{{ scheme }}</span>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getManagement } from '@/api/customer/management'
import { getDetail } from '@/api/health/healthReport'
import { viewByAssociatedId } from '@/api/system/attachment'

export default {
  name: 'healthReportDetail',
  data() {
    return {
      customerId: null,
      type: null,
      reportId: null,
      avatar: null,
      picture: null,
      detailInfo: {
        customerName: '张三',
        createTime: '2023-05-15',
        sz:{
          conclusion: '虚',
          face_color: '偏白',
          lip_color: '淡红',
          st_color_label: '白苔',
          sz_color_label: '淡红',
          expert_advice: '建议多休息，注意保暖，适当进补',
        },
        productList:[],
        risks: [
          '脾胃功能较弱，易消化不良',
          '免疫力偏低，易感冒',
          '气血不足，易疲劳'
        ],
        schemes: [
          '药膳方案：黄芪炖鸡',
          '作息建议：晚上10点前入睡',
          '运动建议：太极、八段锦'
        ]
      },
      reportFunc: {
        '1': () => {
          this.glossoscopy()
        }
      }
    }
  },
  created() {
    this.customerId = this.$route.params && this.$route.params.customerId
    this.type = this.$route.params && this.$route.params.type
    this.reportId = this.$route.params && this.$route.params.reportId
    this.init()
  },
  mounted() {

  },
  methods: {
    init() {
      getManagement(this.customerId).then(res => {
        this.avatar = res.data && res.data.avatar
        if (res.data && res.data.realName) {
          this.detailInfo.customerName = res.data.realName
        }
      })
      this.reportFunc[this.type]()
      viewByAssociatedId(this.reportId).then(res=>{
        this.picture = res.data[0]
      })
    },
    glossoscopy() {
      getDetail(this.reportId).then(res => {
        this.detailInfo.sz = res.data.results
        this.detailInfo.productList = res.data.productList
        this.detailInfo.createTime = res.data.createTime

        console.log(this.detailInfo)
      })
    }
  }
}
</script>

<style scoped lang="scss">
.app-container {
  background-color: #f5f7fa;
  min-height: calc(100vh - 84px);
  padding: 15px;
}

.health-report-header {
  background: linear-gradient(135deg, #409eff, #64b5f6);
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  color: white;

  .header-content {
    display: flex;
    align-items: center;

    .customer-avatar {
      border: 2px solid rgba(255, 255, 255, 0.5);
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    }

    .customer-info {
      margin-left: 20px;

      .customer-name {
        font-size: 22px;
        font-weight: 600;
        margin: 0 0 5px 0;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
      }

      .report-date {
        font-size: 16px;
        opacity: 0.9;
        margin: 0;
      }
    }
  }
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 15px;
}

.grid-item {
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  overflow: hidden;

  &:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  }
}

.card-header {
  display: flex;
  align-items: center;
  padding: 15px 20px;
  border-bottom: 1px solid #eee;
  background-color: #f8f9fa;

  h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #303133;
  }

  .analysis-icon {
    color: #409eff;
    font-size: 20px;
    margin-right: 8px;
  }

  .pulse-icon {
    color: #e6a23c;
    font-size: 20px;
    margin-right: 8px;
  }

  .advice-icon {
    color: #67c23a;
    font-size: 20px;
    margin-right: 8px;
  }

  .risk-icon {
    color: #f56c6c;
    font-size: 20px;
    margin-right: 8px;
  }

  .recommend-icon {
    color: #909399;
    font-size: 20px;
    margin-right: 8px;
  }

  .lifestyle-icon {
    color: #67c23a;
    font-size: 20px;
    margin-right: 8px;
  }
}

.card-content {
  padding: 20px;

  &.compact {
    padding: 15px 20px;
  }
}

.analysis-details {
  text-align: left;
  margin-bottom: 15px;

  .detail-item {
    margin-bottom: 12px;

    .detail-label {
      font-weight: 600;
      color: #606266;
      font-size: 14px;
    }

    .detail-value {
      color: #303133;
      font-size: 14px;
    }
  }

  .analysis-list {
    list-style: none;
    padding-left: 0;
    margin-top: 10px;

    li {
      padding: 6px 0;
      border-bottom: 1px dashed #f0f0f0;
      font-size: 14px;

      &:last-child {
        border-bottom: none;
      }

      .list-label {
        font-weight: 500;
        color: #606266;
      }
    }
  }
}

.image-container {
  text-align: center;

  .analysis-image {
    border-radius: 6px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  }

  .image-caption {
    margin-top: 8px;
    color: #909399;
    font-size: 13px;
  }
}

.pulse-images {
  display: flex;
  justify-content: space-around;
  margin-top: 15px;

  .pulse-image {
    border-radius: 6px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  }
}

.advice-content {
  .advice-title {
    font-weight: 600;
    color: #606266;
    margin-bottom: 10px;
    font-size: 14px;
  }

  .advice-text {
    line-height: 1.6;
    color: #303133;
    font-size: 14px;
  }
}

.risk-list, .lifestyle-list {
  list-style: none;
  padding-left: 0;
  margin: 0;

  .risk-item, .lifestyle-item {
    display: flex;
    align-items: flex-start;
    padding: 8px 0;
    border-bottom: 1px dashed #f0f0f0;

    &:last-child {
      border-bottom: none;
    }

    .risk-item-icon, .lifestyle-item-icon {
      color: #67c23a;
      font-size: 16px;
      margin-right: 8px;
      margin-top: 2px;
      flex-shrink: 0;
    }

    span {
      flex: 1;
      color: #303133;
      line-height: 1.5;
      font-size: 14px;
    }
  }
}

.products-content {
  .section-title {
    font-weight: 600;
    color: #606266;
    margin: 0 0 12px 0;
    font-size: 14px;
  }
}

.product-list {
  max-height: 600px;
  overflow-y: auto;
  padding-right: 5px;

  &::-webkit-scrollbar {
    width: 6px;
  }

  &::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
  }

  &::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
  }

  &::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
  }

  .product-item {
    display: flex;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px dashed #f0f0f0;

    &:last-child {
      border-bottom: none;
    }

    .product-image {
      width: 60px;
      height: 60px;
      border-radius: 6px;
      margin-right: 15px;
      object-fit: cover;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    }

    .product-info {
      flex: 1;

      .product-name {
        margin: 0 0 5px 0;
        font-weight: 600;
        color: #303133;
        font-size: 15px;
        line-height: 1.3;
      }

      .product-price {
        margin: 0 0 3px 0;
        color: #f56c6c;
        font-weight: 700;
        font-size: 16px;
      }

      .product-therapeuticEffect {
        margin: 0;
        color: #606266;
        font-size: 13px;
        line-height: 1.4;
        background-color: #f5f7fa;
        padding: 5px 8px;
        border-radius: 4px;
      }
    }
  }
}

// 响应式设计
@media (max-width: 1200px) {
  .grid-container {
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  }
}

@media (max-width: 768px) {
  .app-container {
    padding: 10px;
  }

  .health-report-header {
    padding: 15px;
    margin-bottom: 15px;

    .header-content {
      flex-direction: column;
      text-align: center;

      .customer-info {
        margin: 15px 0 0 0;

        .customer-name {
          font-size: 20px;
        }

        .report-date {
          font-size: 14px;
        }
      }
    }
  }

  .grid-container {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .card-header {
    padding: 12px 15px;

    h2 {
      font-size: 16px;
    }
  }



  .pulse-images {
    flex-direction: row;
    justify-content: space-around;

    .pulse-image {
      margin-bottom: 0;
      width: 70px;
      height: 70px;
    }
  }
}
</style>
